<template>
  <div class="info">
    <a-image width="100%" :src="state.info.article_backimg" />
    <a-typography-title :level="3">{{ state.info.article_title }}</a-typography-title>
    <a-typography-paragraph>
      <a-typography-text strong>
        发布时间: {{ format(state.info.article_time, 'YYYY-MM-DD HH:mm:ss') }}
        浏览数: {{ state.info.article_view }}
      </a-typography-text>
    </a-typography-paragraph>

    <div class="categories">
      <span :style="{ marginRight: '8px' }">分类:</span>
      <template v-for="item, index in state.info.categories_id" :key="index">
        <a-checkable-tag>
          {{ item.categories_title }}
        </a-checkable-tag>
      </template>
    </div>

    <div class="tag">
      <span :style="{ marginRight: '8px' }">标签:</span>
      <template v-for="item, index in state.info.tag_id" :key="index">
        <a-checkable-tag>
          {{ item.tag_title }}
        </a-checkable-tag>
      </template>
    </div>


    <a-typography-paragraph class="text" v-html="state.info.article_text"></a-typography-paragraph>

    <a-typography-title :level="4">全部评论</a-typography-title>
    <comment v-if="Object.keys(state.info).length != 0" @refresh="getInfo" :data="state.info"></comment>
   
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { onMounted, reactive, toRefs } from "vue";
import http, { format } from "@/utils";
import { ArticleInfoType } from "@/types/response/home";



const route = useRoute()

const state: {
  info: ArticleInfoType
} = reactive({
  info: <ArticleInfoType>{},
})

onMounted(() => {
  getInfo()
})

const getInfo = async () => {
  state.info = await http.articleInfo({
    id: route.query.id
  });
  console.log("res: ", state.info);
}


</script>
  
<style lang="less" scoped>
.info {
  .text {
    font-size: 18px;
  }
}
</style>
  